// 从本地存储获取用户名设置到首页右上角
function setUserName() {
  // 获取本地存储数据
  let uname = localStorage.getItem('username')
  const userBox = document.querySelector('.username')
  if (uname) {
    userBox.innerHTML = uname
  } else {
    userBox.innerHTML = ''
  }
}
setUserName()

// 获取学生列表
// async function getData() {
//   try {
//     const res = await axios.get('/students')
//     const str = res.data.data.map(item => {
//       return `
//         <tr>
//             <td>${item.name}</td>
//             <td>${item.age}</td>
//             <td>${item.gender === 0 ? '男' : '女'}</td>
//             <td>第${item.group}组</td>
//             <td>${item.hope_salary}</td>
//             <td>${item.salary}</td>
//             <td>${item.province + item.city + item.area}</td>
//             <td data-id="${item.id}">
//             <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
//             <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
//             </td>
//         </tr>

//         `
//     }).join('')
//     document.querySelector('.list').innerHTML = str
//     document.querySelector('.total').innerText = res.data.data.length
//   } catch (err) {
//     pxmu.fail(err.response && err.response.data.message || '获取学生列表')
//   }
// }
// getData()

const tbodyBox = document.querySelector('.list')
const bsModal = new bootstrap.Modal(document.getElementById('modal'))
let studentId = 0

// 软件设计原则：开闭原则，对新增开放，对修改关闭  - 解耦

// =====操作数据 - 和服务器打交道=====

// 1. 向服务器获取学生列表数据
async function getStudentsData() {
  try {
    let res = await axios({ url: '/students' })
    return res.data  // {message:'',data:[{}]}
  } catch (error) {
    pxmu.fail(error.response && error.response.data.message || '获取学生数据异常，检查网络')
  }
}

// 2. 完成学生编辑功能，相关的数据接口需要封装5个方法

// 2.1 获取省 - 无参
async function getProvinceData() {
  try {
    let res = sessionStorage.getItem('prov')
    if (res) {
      return JSON.parse(res).data
    } else {
      res = await axios({ url: '/api/province' }) // {message：'',list:['','']}
      sessionStorage.setItem('prov', JSON.stringify(res))
      return res.data
    }
  } catch (error) {
    pxmu.fail(error.response && error.response.data.message || '获取省份数据异常，检查网络')
  }
}
// 2.2 获取市 - 需要传入省名称
async function getCityData(pname) {
  try {
    let res = sessionStorage.getItem(pname)
    if (res) {
      return JSON.parse(res).data
    } else {
      res = await axios({ url: '/api/city?pname=' + pname }) // {message：'',list:['','']}
      sessionStorage.setItem(pname, JSON.stringify(res))
      return res.data
    }
  } catch (error) {
    pxmu.fail(error.response && error.response.data.message || '获取城市数据异常，检查网络')
  }
}
// 2.3 获取区- 需要传入省和市名称
async function getAreaData(pname, cname) {
  try {
    let res = sessionStorage.getItem(pname+cname)
    if (res) {
      return JSON.parse(res).data
    } else {
      res = await axios({ url: `/api/area?pname=${pname}&cname=${cname}` }) // {message：'',list:['','']}
      sessionStorage.setItem(pname+cname, JSON.stringify(res))
      return res.data
    }
  } catch (error) {
    pxmu.fail(error.response && error.response.data.message || '获取地区数据异常，检查网络')
  }
}
// 2.4 根据id获取学生的详情老数据
async function getInfo(id) {
  try {
    let res = await axios({ url: `/students/${id}` })
    return res.data // {message：'',data:{}}        
  } catch (error) {
    pxmu.fail(error.response && error.response.data.message || '获取学生详情异常，检查网络')
  }
}
// 2.5 修改学生的详情数据
async function modifyInfo(id, body) {
  try {
    let res = await axios({ url: `/students/${id}`, method: 'PUT', data: body })
    return res.data // {message：'',data:[{},{}]}        
  } catch (error) {
    pxmu.fail(error.response && error.response.data.message || '获取学生详情异常，检查网络')
  }
}
// 2.6 新增学生数据
async function addInfo(body) {
  try {
    let res = await axios({ url: '/students', method: 'POST', data: body })
    return res.data
    //return res.data // {message：'',data:[{},{}]}        
  } catch (error) {
    pxmu.fail(error.response && error.response.data.message || '新增学生详情异常，检查网络')
  }
}
// 2.7 删除学生数据
async function delInfo(id) {
  try {
    let res = await axios({ url: `/students/${id}`, method: 'DELETE' })
    return res.data
    //return res.data // {message：'',data:[{},{}]}        
  } catch (error) {
    pxmu.fail(error.response && error.response.data.message || '新增学生详情异常，检查网络')
  }
}

// =====渲染界面 - 和界面打交道=====

// 1. 渲染学生数据到表格中
async function renderStudents() {
  let { data } = await getStudentsData()
  console.log(data)
  let str = ''
  data.forEach(item => {
    str += `
      <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender == 0 ? '男' : '女'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province}${item.city}${item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${item.id}"></i></a>
          <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-index="${item.id}"></i></a>
        </td>
      </tr>
    `
  })
  tbodyBox.innerHTML = str
  document.querySelector('.total').innerText = data.length
}

// 2. 渲染省，市，区三个数据到界面上
const provinceBox = document.querySelector('[name=province]')
async function renderProvince() {
  const { list } = await getProvinceData()
  let str = ''
  list.forEach(name => {
    str += `<option value="${name}">${name}</option>`
  })
  provinceBox.innerHTML = `<option value="">--省份--</option>${str}`
}

const cityBox = document.querySelector('[name=city]')
async function renderCity(pname) {
  const { list } = await getCityData(pname)
  let str = ''
  list.forEach(name => {
    str += `<option value="${name}">${name}</option>`
  })
  cityBox.innerHTML = `<option value="">--城市--</option>${str}`
}

const areaBox = document.querySelector('[name=area]')
async function renderArea(pname, cname) {
  const { list } = await getAreaData(pname, cname)
  let str = ''
  list.forEach(name => {
    str += `<option value="${name}">${name}</option>`
  })
  areaBox.innerHTML = `<option value="">--地区--</option>${str}`
}

// =====各种事件 - 和用户打交道=====

// 1.1 编辑事件
function forTbody() {
  tbodyBox.addEventListener('click', async function (e) {
    // 这个方法中即可做编辑也可以做删除
    // 如何判断现在是点击了编辑按钮
    if (e.target.className == 'bi bi-pen') {
      // alert('编辑')
      // alert(e.target.dataset.id)
      // 1. 根据id获取学生的老数据
      studentId = e.target.dataset.id
      const { data } = await getInfo(studentId)

      // 2. 数据回显到页面
      for (key in data) {
        if (key == 'gender') {
          const genderBox = document.querySelectorAll(`[name=${key}]`)
          // console.log(genderBox)
          genderBox[data[key]].checked = true
        } else {
          const box = document.querySelector(`[name=${key}]`)
          if (box) {
            box.value = data[key]
          }
        }
      }

      // 3. 显示用户所在的省，市，区
      let { province, city, area } = data
      // console.log(province,city,area)
      provinceBox.value = province
      await renderCity(province)
      // 回显城市
      cityBox.value = city

      await renderArea(province, city)
      areaBox.value = area

      // 打开模态框
      bsModal.show()
    }

    // 删除
    if (e.target.className == 'bi bi-trash') {
      delInfo(e.target.dataset.index)
      renderStudents()
    }
  })
}

// 2. 注册省份和市区select的change事件
provinceBox.addEventListener('change', function (e) {
  // alert(e.target.value)
  // 1. 获取用户选择的省
  let pname = e.target.value
  // 2. 调用 renderCity
  renderCity(pname)
})

cityBox.addEventListener('change', function (e) {
  // alert(e.target.value)
  // 1. 获取用户选择的省
  let cname = e.target.value
  // 2. 调用 renderCity
  renderArea(provinceBox.value, cname)
})

// 修改学生数据
const btnSubmitBox = document.querySelector('#submit')
const formBox = document.querySelector('#form')

// 添加学生数据
document.querySelector('#openModal').addEventListener('click', async () => {
  bsModal.show()
})

btnSubmitBox.addEventListener('click', async () => {
  // 收集表单数据
  let body = serialize(formBox, { hash: true, empty: true })
  body.age = +body.age
  body.gender = +body.gender
  body.group = +body.group
  body.hope_salary = +body.hope_salary
  body.salary = +body.salary
  console.log(body)
  if (studentId > 0) {
    // 调用modifyInfo完成数据的修改
    await modifyInfo(studentId, body)
  } else {
    // 调用addInfo完成数据的添加
    await addInfo(body)
  }
  // 关闭模态框+刷新列表数据
  bsModal.hide()
  studentId = 0
  renderStudents()
  formBox.reset()
})

// =====页面进入时，各种方法调用初始化=====
renderStudents()
forTbody()
renderProvince()
